<!--
 * @Author: your name
 * @Date: 2021-03-10 11:19:28
 * @LastEditTime: 2021-04-06 11:03:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \svn-solax-cloud-system\src\views\cs.vue
-->
<template>
    <div class="dragover-mian-box">
        <div class="left-mian-box" @drop="drop" @dragover="allowDrop">
            <!-- <img v-for='item in 100' :key='item' src="../assets/img/pmcs.png" draggable="true" @dragstart="drag" alt="" style="width:150px; position: absolute;user-select: none;transform:rotate(0deg)"  class='imgBox' > -->
            <i v-for='item in 100' draggable="true" @dragstart="drag" :key='item+"k"' class="iconfont icon-dianzhanxinxi iconBox" style="font-size:50px;position: absolute;user-select: none;transform:rotate(0deg);top:0px;" ></i>
            <i v-for='item in 100' draggable="true" @dragstart="drag" :key='item+"s"' class="iconfont icon-jikong iconBox" style="font-size:50px;position: absolute;user-select: none;transform:rotate(0deg);top:80px;" ></i>
            <div v-for='item in 100' :key='item+"i"' draggable="true" @dragstart="drag" class="inputBox" style=" position: absolute;user-select: none;transform:rotate(0deg);top:160px;padding:10px;background-color:#ccc;">
                <input type="text" draggable="false" style="width:100px;user-select: none;" onselectstart="return false;" unselectable="on">
            </div>
        </div>
        <div class="right-mian-box-big">
            <div class="nav-box-fixed">
                <el-color-picker
                v-model="color"
                show-alpha
                :predefine="predefineColors"
                
                >
                </el-color-picker>
                <div class="color-box-click" @click='setColor' :style='"background-color:"+color+";"'></div>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    label="直线"
                    value="1">
                    </el-option>
                    <el-option
                    label="指向线"
                    value="2">
                    </el-option>
                    <el-option
                    label="流动线"
                    value="3">
                    </el-option>
                </el-select>
                <div style='width:200px'><el-slider v-model="value2" :step="90" :max='360' @input='setRotate' show-stops></el-slider></div>
                <el-button type="primary" @click='save'>保存</el-button>
                <i class="el-icon-question" style="font-size:25px;" @click='drawer=true'></i>
                <el-switch
                v-model="oblique"
                active-text="直线"
                inactive-text="斜线">
                </el-switch>
                   
                <el-switch
                v-model="buff"
                active-text="辅助"
                inactive-text="自由">
                </el-switch>
            </div>
            <div class="right-mian-box" id="drag1" @drop="drop" @dragover="allowDrop" @mousedown='cscs' style='transform: scale(1);'>
            <div class="x-line"></div>
            <div class="y-line"></div>
            <div class="assist-x"></div>
            <div class="assist-y"></div>
            
        </div>
        </div>
        <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
            <div style='padding:20px;font-size:16px;'>
                <h1>指南</h1>
                <el-divider></el-divider>
                <p>1、+或-，放大缩小画布</p>
                <p>2、点击目标元素，滚轮放大缩小目标元素</p>
                <p>3、点击画布，按住鼠标拖拽可画线，线的类型默认直线，可切换线条类型</p>
                <p>4、点击元素，按住鼠标可移动目标元素</p>
                <p>5、选择颜色选择器，可更改目标元素的颜色（图片除外）</p>
                <p>6、点击元素，元素的旋转角度显示在步骤条上，可拉动步骤条旋转元素</p>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import $ from 'jquery'
import { setTimeout } from 'timers';
import { request } from 'http';
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            dom:'',
            value:'1',
            value2:0,
            domId:'',
            mousedownXY:{},
            mouseupXY:{},
            color:'rgba(163, 160, 159, 1)',
            predefineColors: [
            'rgba(163, 160, 159, 1)',
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
            'rgba(255, 69, 0, 0.68)',
            'rgb(255, 120, 0)',
            'hsv(51, 100, 98)',
            'hsva(120, 40, 94, 0.5)',
            'hsl(181, 100%, 37%)',
            'hsla(209, 100%, 56%, 0.73)',
            '#c7158577'
            ],
            dataDom:[],//储存数据
            scaleNum:1,  //放大缩小关系
            lineNumId:'',
            drawer:false,
            domDataList:[],
            angel:'',
            oblique:true,
            nowDomData:{},
            nowY:'',
            buff:false,
            oldXY:[],
            nowX:''
        };
    },
    computed: {
        oldXYLength(){
            
        }
    },
    watch: {
        domId:{
            handler(nv,ov){
                if(nv!=ov){
                    this.oldXY = []
                }
            },
            deep:true
        }
    },
    created() {
    },
    mounted() {
        document.addEventListener('DOMMouseScroll',this.scrollFunc,false)
        window.onmousewheel = document.onmousewheel = this.scrollFunc;
        let that = this
        $(".right-mian-box").mousedown(function() {
             //记录鼠标位置
            that.moveCs()
        }).mouseup(function() {
            that.mouseupXY = that.getMousePos(event);
            if(that.dom == $($('.right-mian-box'))[0]){
                // that.draw(that.mousedownXY, that.mouseupXY)
            }
        })
        $('.right-mian-box').on('mousedown','.line',function(e){
            that.move(e)
        })
        $('.right-mian-box').on('mousedown','.imgBox',function(e){
            that.move(e)
        })
        $('.right-mian-box').on('mousedown','.iconBox',function(e){
            that.move(e)
        })
        $('.right-mian-box').on('mousedown','.inputBox',function(e){
            that.move(e)
        })
        $(document).keydown(function (event) {
            if (event.keyCode == 46) {
                that.deleteDom()
            }
            if(event.keyCode == 107){
                that.scaleBackground(1)
            }
            if(event.keyCode == 109){
                that.scaleBackground(2)
            }
        })
    },
    methods: {
        moveCs(){
            console.log('cscscscscscscscscscs');
            this.mousedownXY = this.getMousePos(event);
            this.mouseupXY = {}
            this.draw(this.mousedownXY, this.mouseupXY)
            $('.right-mian-box')[0].onmousemove = (e)=>{
                if(this.dom == $($('.right-mian-box'))[0]){
                    this.mouseupXY = this.getMousePos(event);
                    this.drawCopy(this.mousedownXY, this.mouseupXY)
                }
            }
            $('.right-mian-box')[0].onmouseup = (e) => {
                // console.log(e,'onmouseup');
                // console.log(this.returnAngleWhole(this.angel),'this.returnAngleWhole(this.angel)');
                if(this.oblique){
                    $(`#${this.lineNumId}`).css('-webkit-transform', 'rotate(' + this.returnAngleWhole(this.angel) + 'deg)')
                }
                
                $('.right-mian-box')[0].onmousemove = null;
                $('.right-mian-box')[0].onmouseup = null;
                this.mousedownXY = {}
                this.mouseupXY = {}
                if($(`#${this.lineNumId}`).width() == 0){
                    $(`#${this.lineNumId}`).remove()
                    this.domDataList = this.removeArray(this.lineNumId)
                }else{
                    let obj={
                        id:this.lineNumId,
                        x:$(`#${this.lineNumId}`)[0].offsetLeft+$(`#${this.lineNumId}`)[0].offsetWidth/2,
                        y:$(`#${this.lineNumId}`)[0].offsetTop+$(`#${this.lineNumId}`)[0].offsetHeight/2,
                        w:this.returnDegFlag(this.angel) ? 5:$(`#${this.lineNumId}`).width(),
                        h:this.returnDegFlag(this.angel) ? $(`#${this.lineNumId}`).width():5,
                        a:this.returnDegFlag(this.angel) || false
                    }
                    this.domDataList.push(obj)
                }
                this.angel = ''
            };
        },
        removeArray(id){//配合删除元素，删除对应的记录
            let arr = []
            this.domDataList.forEach(item =>{
                if(item.id != id){
                    arr.push(item)
                }
            })
            return arr
        },
        setDomArrayList(id,x,y,w,h){//记录各元素的位置、大小
            if(this.domDataList.length>0){
                this.domDataList.forEach(item =>{
                    if(item.id == id){
                        this.$set(item,'x',x)
                        this.$set(item,'y',y)
                        this.$set(item,'w',w)
                        this.$set(item,'h',h)
                    }
                })
            }
        },
        scaleBackground(type){
            let num = parseFloat($('.right-mian-box').attr('style').split('(')[1].split(')')[0])
            if(type == 1){
                num +=0.1
                this.scaleNum = num
                $('.right-mian-box').attr('style',`transform: scale(${num})`)
            }
            if(type == 2){
                num -=0.1
                num = num <1?1:num
                this.scaleNum = num
                $('.right-mian-box').attr('style',`transform: scale(${num})`)
            }
        },
        save(){
            this.dataDom = []
            let doms = $('.right-mian-box').children()
            for(let i =1;i<doms.length;i++){
                let obj = {
                    target:'',
                    style:'',
                    class:'',
                    src:'',
                    arrowStyle:'',
                    text:''
                }
                obj.target = $(doms[i])[0].tagName
                obj.style = $(doms[i]).attr('style')
                obj.class = $(doms[i]).attr('class')
                if($(doms[i])[0].tagName == 'IMG'){
                    obj.src = $(doms[i]).attr('src')
                }
                if($(doms[i]).attr('class').indexOf('lineGo') != -1){
                    let id=$(doms[i]).attr('id')+'k'
                    obj.arrowStyle = $(`#${id}`).attr('style')
                }
                if($(doms[i]).attr('class').indexOf('inputBox') != -1){
                    obj.text = $(doms[i]).children('input').val()
                }
                this.dataDom.push(obj)
            }
            localStorage.setItem('getDomData',JSON.stringify(this.dataDom))
            let routeData = this.$router.resolve({path: '/present'});
            window.open(routeData.href, '_blank');
        },
        deleteDom(){
            if(this.domId){
                if(this.domId.indexOf('k') != -1){
                    $(`#${this.domId}`).parents('.line').remove()
                    this.removeArray(this.domId)
                }else{
                    $(`#${this.domId}`).remove()
                    this.removeArray(this.domId)
                }
                
            }
        },
        setColor(){
            if(this.domId){
                if($(`#${this.domId}`)[0].tagName == 'I'){
                    $(`#${this.domId}`).css('color', this.color)
                }else{
                    $(`#${this.domId}`).css('background-color', this.color).children('.arrow-triangleDom').css('border-left', `20px solid ${this.color}`)
                }
            }
        },
        cscs(e){
            this.dom = e.target
        },
        returnNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        },
        getMousePos(event) {
            let e = event || window.event;
            return {
                'x': e.pageX,
                'y': e.pageY
            }
        },
        drawCopy(mousedownXY, mouseupXY) {
            // var width1 = Math.sqrt(Math.pow(mousedownXY.x - mouseupXY.x, 2) + Math.pow(mousedownXY.y - mouseupXY.y, 2))
            var width1 = Math.sqrt(Math.pow(mousedownXY.x - mouseupXY.x, 2) + Math.pow(mousedownXY.y - mouseupXY.y, 2))
            if (mousedownXY.x - mouseupXY.x <= 0) {
                var angel1 = Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) //角 弧度制
                var angel = Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) * 180 / Math.PI
            } else {
                var angel1 = Math.PI + Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x))
                var angel = 180 + Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) * 180 / Math.PI;;
            }
            // angel = this.returnAngleWhole(angel)
            this.angel = angel
            var dx = 0.5 * width1 * (1 - Math.cos(angel1))
            var dy = 0.5 * width1 * Math.sin(angel1) - 5
            let numId = this.lineNumId
            let bgImg =window.location.protocol+'//'+ window.location.host+'/move3.gif'
            
            this.setDomArrayList(numId,(mousedownXY.x - dx - 200)/this.scaleNum,(mousedownXY.y + dy)/this.scaleNum,width1/this.scaleNum,5)
            if(this.value == 1){
                $(`#${numId}`).css('width', width1/this.scaleNum).css('height', 5).css('background-color', this.color).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', (mousedownXY.y + dy)/this.scaleNum).css('left', (mousedownXY.x - dx - 200)/this.scaleNum).css('position', 'absolute').attr('draggable','false')
            }else if(this.value == 2){
                $(`#${numId}`).css('width', width1/this.scaleNum).css('height', 5).css('background-color', this.color).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', (mousedownXY.y + dy)/this.scaleNum).css('left', (mousedownXY.x - dx - 200)/this.scaleNum).css('position', 'absolute').attr('draggable','false')
                // let triangleDom = `<div id="${numId}k" class='arrow-triangleDom'></div>`
                // $(`#${numId}`).append(triangleDom)
                $(`#${numId}k`).css('width', 0).css('height', 0).css('float', 'right').css('border-bottom', '10px solid transparent').css('border-left', `20px solid ${this.color}`).css('border-top', '10px solid transparent').css('margin-top', '-7px').css('margin-right', '-20px').attr('draggable','false')
            }else if(this.value == 3){
                $(`#${numId}`).css('width', width1/this.scaleNum).css('height', 13).css('background', `url(${bgImg}) no-repeat center center`).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', (mousedownXY.y + dy)/this.scaleNum).css('left', (mousedownXY.x - dx - 200)/this.scaleNum).css('position', 'absolute').attr('draggable','false')
            }
        },
        returnDegFlag(deg){
            console.log(deg,'deg');
            if(deg <= 45){
                return false
            }else if(deg <= 90){
                return true
            }else if(deg <= 135){
                return true
            }else if(deg <= 180){
                return false
            }else if(deg <= 225){
                return false
            }else if(deg <= 270){
                return true
            }else if(deg <= 315){
                return true
            }else if(deg <= 360){
                return false
            }
        },
        returnAngleWhole(deg){
            if(deg <= 45){
                return 0
            }else if(deg <= 90){
                return 90
            }else if(deg <= 135){
                return 90
            }else if(deg <= 180){
                return 180
            }else if(deg <= 225){
                return 180
            }else if(deg <= 270){
                return 270
            }else if(deg <= 315){
                return 270
            }else if(deg <= 360){
                return 360
            }
        },
        draw(mousedownXY, mouseupXY) {
            var width1 = Math.sqrt(Math.pow(mousedownXY.x - mouseupXY.x, 2) + Math.pow(mousedownXY.y - mouseupXY.y, 2))
            if (mousedownXY.x - mouseupXY.x <= 0) {
                var angel1 = Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) //角 弧度制
                var angel = Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) * 180 / Math.PI
            } else {
                var angel1 = Math.PI + Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x))
                var angel = 180 + Math.atan((mousedownXY.y - mouseupXY.y) / (mousedownXY.x - mouseupXY.x)) * 180 / Math.PI;;
            }
            var dx = 0.5 * width1 * (1 - Math.cos(angel1))
            var dy = 0.5 * width1 * Math.sin(angel1) - 5
            let numId = 'a' + this.returnNum(10000000000, 99999999999)
            this.lineNumId = numId
            
            // $(`#${numId}`).css('width', width1).css('height', 5).css('background-color', this.color).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', mousedownXY.y + dy).css('left', mousedownXY.x - dx - 200).css('position', 'absolute')
            // console.log(bgImg,'bgImg');
            let bgImg =window.location.protocol+'//'+ window.location.host+'/move3.gif'
            if(this.value == 1){
                let divModal = `<div id="${numId}" class='line'></div>`
                $('.right-mian-box').append(divModal)
                $(`#${numId}`).css('width', width1).css('height', 5).css('background-color', this.color).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', (mousedownXY.y + dy)/this.scaleNum).css('left', (mousedownXY.x - dx - 200)/this.scaleNum).css('position', 'absolute').attr('draggable','false')
            }else if(this.value == 2){
                let divModal = `<div id="${numId}" class='line lineGo'></div>`
                $('.right-mian-box').append(divModal)
                $(`#${numId}`).css('width', width1).css('height', 5).css('background-color', this.color).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', mousedownXY.y + dy).css('left', mousedownXY.x - dx - 200).css('position', 'absolute').attr('draggable','false')
                let triangleDom = `<div id="${numId}k" class='arrow-triangleDom'></div>`
                $(`#${numId}`).append(triangleDom)
                $(`#${numId}k`).css('width', 0).css('height', 0).css('float', 'right').css('border-bottom', '10px solid transparent').css('border-left', `20px solid ${this.color}`).css('border-top', '10px solid transparent').css('margin-top', '-7px').css('margin-right', '-20px').attr('draggable','false')
            }else if(this.value == 3){
                let divModal = `<div id="${numId}" class='line'></div>`
                $('.right-mian-box').append(divModal)
                $(`#${numId}`).css('width', width1).css('height', 13).css('background', `url(${bgImg}) no-repeat center center`).css('-webkit-transform', 'rotate(' + angel + 'deg)').css('top', mousedownXY.y + dy).css('left', mousedownXY.x - dx - 200).css('position', 'absolute').attr('draggable','false')
            }
        },
        getRotate(el){
            var st = window.getComputedStyle(el, null);
            var tr = st.getPropertyValue("-webkit-transform") ||
                st.getPropertyValue("-moz-transform") ||
                st.getPropertyValue("-ms-transform") ||
                st.getPropertyValue("-o-transform") ||
                st.getPropertyValue("transform") ||
                "FAIL";
            var values = tr.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var c = values[2];
            var d = values[3];
            var scale = Math.sqrt(a * a + b * b);
            var sin = b / scale;
            var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
            if(angle<0){
                angle = 180 + (180+angle)
            }
            return angle
        },
        setRotate(){
            if(this.domId){
                if(this.domId.indexOf('k') != -1){
                    $(`#${this.domId}`).parents('.line').css('transform', 'rotate(' + this.value2 + 'deg)')
                }else{
                    $(`#${this.domId}`).css('transform', 'rotate(' + this.value2 + 'deg)')
                }
            }
        },
        scrollFunc(e){  
            e=e || window.event;  
            if(e.wheelDelta){//IE/Opera/Chrome  
                let width = this.dom.offsetWidth
                if(this.dom){
                    // console.log($(this.dom).attr('class') );
                    if($(this.dom).attr('class') == 'right-mian-box'){
                    }
                    else{
                        if(e.wheelDelta>0){
                            this.dom.style.width =width + 10 + 'px'
                        }else{
                            this.dom.style.width =width - 10 + 'px'
                        }
                    }
                }
            }else if(e.detail){//Firefox  
            }  
        },

        move(e){
            this.dom = e.target
            this.domId = e.target.id
            this.value2=this.getRotate(e.target)
            let odiv = e.target;        //获取目标元素
            let disX = e.clientX/this.scaleNum - odiv.offsetLeft;
            let disY = e.clientY/this.scaleNum - odiv.offsetTop;
            
            document.onmousemove = (e)=>{
                console.log(this.domDataList.length,'this.domDataList.length');
                let domtop = e.target.offsetTop+e.target.offsetHeight/2
                let domleft = e.target.offsetLeft+e.target.offsetWidth/2
                let id = $(this.dom).attr('id')

                if(this.buff){
                    let obj = {
                        x:e.target.offsetLeft+e.target.offsetWidth/2,
                        y:e.target.offsetTop+e.target.offsetHeight/2,
                    }
                    this.oldXY.push(obj)
                    if(this.oldXY.length >=5){
                        let status = this.deviationXY() //算元素运动轨迹的偏移方向
                        let nearDom = this.returnNearDom(status)
                        if(nearDom && status == 'y'){
                            this.buffLine(nearDom)
                            // $('.assist-y').css('transform',`translateX(${0}px)`)
                        }
                        if(nearDom && status == 'x'){
                            this.buffLineX(nearDom)
                            // $('.assist-x').css('transform',`translateY(${0}px)`)
                        }
                        
                    }
                }
                
                let left = e.clientX/this.scaleNum - disX;    
                let top = e.clientY/this.scaleNum - disY;
                this.positionX = top;
                this.positionY = left;
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
            }
            document.onmouseup = (e) => {
                let id = $(e.target).attr('id')
                let idDom = $(this.dom).attr('id')
                let aItem = ''
                this.domDataList.forEach(item =>{
                    if(item.id == id){
                        aItem = item
                    }
                })
                if(this.buff){
                    if(aItem.a){
                        if(this.nowY){
                            $(this.dom).css('top',this.nowY+aItem.h/2+'px')
                            this.nowY = ''
                        }
                        if(this.nowX){
                            $(this.dom).css('left',this.nowX-aItem.h/2+'px')
                            this.nowX = ''
                        }
                    }else {
                        if(this.nowY){
                            $(this.dom).css('top',this.nowY+'px')
                            this.nowY = ''
                        }
                        if(this.nowX){
                            $(this.dom).css('left',this.nowX+'px')
                            this.nowX = ''
                        }
                    }
                    
                }
                this.domDataList.forEach(item =>{
                    if(item.id == id){
                        item.y=e.target.offsetTop+e.target.offsetHeight/2
                        item.x=e.target.offsetLeft+e.target.offsetWidth/2
                    }
                })
                $('.x-line').css('transform',`translateY(${0}px)`)
                $('.y-line').css('transform',`translateX(${0}px)`)
                $('.assist-x').css('transform',`translateY(${0}px)`)
                $('.assist-y').css('transform',`translateX(${0}px)`)
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        returnNearDom(status){
            let near = {}
            let nearx = {}
            let nearNum = 10000000
            let nearNumx = 10000000
            if(status == 'y'){
                for(let i = 0;i<this.domDataList.length;i++){
                    if(Math.abs(this.domDataList[i].y-this.returnCoordinate('y')) <nearNum &&  this.domDataList[i].id != $(this.dom).attr('id')){
                        near = this.domDataList[i]
                        nearNum = Math.abs(this.domDataList[i].y-this.returnCoordinate('y'))
                    }
                }
                if(near){
                    return near
                }else{
                    return ''
                }
            }else if(status == 'x'){
                for(let i = 0;i<this.domDataList.length;i++){
                    if(Math.abs(this.domDataList[i].x-this.returnCoordinate('x')) <nearNumx &&  this.domDataList[i].id != $(this.dom).attr('id')){
                        nearx = this.domDataList[i]
                        nearNumx = Math.abs(this.domDataList[i].x-this.returnCoordinate('x'))
                    }
                }
                if(nearx){
                    return nearx
                }else{
                    return ''
                }
            }
            // if(near){
            //     console.log(near.id,'near');
            //     return near
            // }else{
            //     return ''
            // }
        },
        deviationXY(){
            let status = ''
            if(this.oldXY.length>=5){
               let absX =  Math.abs(this.oldXY[this.oldXY.length-1].x-this.oldXY[this.oldXY.length-5].x)
               let absY = Math.abs(this.oldXY[this.oldXY.length-1].y-this.oldXY[this.oldXY.length-5].y)
               status = absX > absY ? 'x':'y'
            }
            // console.log(status,'status');
            return status
        },
        buffLine(item){
            // this.domDataList.forEach(item=>{
                // console.log(item.id,item.y,item.h,'asdasdasd');
                // console.log(this.returnCoordinate('y'),'returnCoordinate');
                if(item.id != $(this.dom).attr('id')){
                    if(this.returnCoordinate('y') > item.y+item.h){
                        this.setAssistY(0)
                        return true
                    }
                    if(this.returnCoordinate('y')> item.y+item.h/2){
                        this.setAssistY(item.y+item.h/2)
                        return true
                    }
                    if(this.returnCoordinate('y') >= item.y && this.returnCoordinate('y') <= item.y+item.h/2){
                        this.setAssistY(item.y)
                        return true
                    }
                    if(this.returnCoordinate('y') < item.y && this.returnCoordinate('y') >= item.y-item.h/2){
                        this.setAssistY(item.y-item.h/2)
                        return true
                    }
                    if(this.returnCoordinate('y') < item.y-item.h){
                        this.setAssistY(0)
                        return true
                    }
                }
            // })
        },
        buffLineX(item){
                if(item.id != $(this.dom).attr('id')){
                    if(this.returnCoordinate('x')> item.x+item.w){
                        this.setAssistX(0)
                        return
                    }
                    if(this.returnCoordinate('x')> item.x+item.w/2){
                        this.setAssistX(item.x+item.w/2)
                        return
                    }
                    if(this.returnCoordinate('x') >= item.x && this.returnCoordinate('x') <= item.x+item.w/2){
                        this.setAssistX(item.x)
                        return
                    }
                    if(this.returnCoordinate('x') < item.x && this.returnCoordinate('x') >= item.x-item.w/2){
                        this.setAssistX(item.x-item.w/2)
                        return
                    }
                    if(this.returnCoordinate('x') < item.x-item.w){
                        this.setAssistX(0 )
                        return
                    }
                }
        },
        returnCoordinate(type){
            let id = $(this.dom).attr('id')
            let a = ''
            this.domDataList.forEach(item =>{
                if(item.id == id){
                    a = item.a
                }
            })
            if(type == 'x'){
                // console.log(this.dom.offsetLeft,'offsetLeftxxxxxx');
                if(a){
                    return this.dom.offsetLeft + this.dom.offsetWidth/2 + 5/2
                }
                return this.dom.offsetLeft 
                // + this.dom.offsetWidth
            }else if(type == 'y'){
                if(a){
                    return this.dom.offsetTop - this.dom.offsetWidth/2 - 5/2
                }
                // console.log(this.dom.offsetTop + this.dom.offsetHeight,'this.dom.offsetTop + this.dom.offsetHeight');
                return this.dom.offsetTop 
            }
        },
        setAssistY(y){
            $('.assist-x').css('transform',`translateY(${y}px)`)
            this.nowY = y
            // console.log(y,'y');
            // $('.assist-x').css('top',`${y}px)`)
        },
        setAssistX(x){
            console.log(x,'y');
            $('.assist-y').css('transform',`translateX(${x}px)`)
            this.nowX = x
            
            // $('.assist-x').css('top',`${y}px)`)
        },
        allowDrop(ev){
            ev.preventDefault();
        },
        drag(ev){
            this.dom = ev.target
        },
        drop(ev){
            ev.preventDefault();
            if($(this.dom).attr('class') == 'arrow-triangleDom'){
                return
            }
            this.dom.style.position = 'absolute'
            this.dom.style.left = (ev.clientX-this.dom.offsetWidth/2 - 200)/this.scaleNum + 'px'
            this.dom.style.top = (ev.clientY-this.dom.offsetHeight/2)/this.scaleNum + 'px'
            let id = 'b' + this.returnNum(10000000000, 99999999999)
            this.dom.setAttribute('id',id)
            $('.right-mian-box')[0].appendChild(this.dom);
            let obj={
                id:id,
                x:this.dom.offsetLeft+this.dom.offsetWidth/2,
                y:this.dom.offsetTop+this.dom.offsetHeight/2,
                w:this.dom.offsetWidth,
                h:this.dom.offsetHeight,
            }
            this.domDataList.push(obj)
            this.dom.setAttribute("draggable","false")
        }
    },
};
</script>

<style  lang="less" >
.dragover-mian-box{
    height: 100%;
    display: flex;
    .left-mian-box{
        width: 200px;
        border-right: 2px solid #000;
        // background-color: #ccc;
    }
    .gif-bg-box{
        background: url(../assets/img/move3.gif) no-repeat;
        width: 100px;
        height: 20px;
        background-size: auto 100%;
    }
    .right-mian-box-big{
        flex: 1;
        overflow: auto;
    }
    .right-mian-box{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: 
        linear-gradient(to right,#ccc 1px,transparent 1px),
        linear-gradient(to bottom,#ccc 1px,transparent 1px);
        background-repeat: repeat;/* 默认为 repeat */
        background-size: 10px 10px;
        transform-origin: 0 0;
    }
    .nav-box-fixed{
        position: fixed;
        top: 0;
        left: 200px;
        width: calc(100% - 200px);
        height: 40px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: darkgrey 10px 5px 30px 5px ;
        z-index:999;
        display: flex;
    }
    .color-box-click{
        width: 32px;
        height: 32px;
        cursor:pointer;
    }
    .arrow-triangleDom {
        border-top: 5px solid transparent;
        border-left: 10px solid red;
        border-bottom: 5px solid transparent;
        width: 0;
        margin: 0px;
        height: 0;
        float: right;
        
    }
    .assist-x,
    .x-line{
        width: 100%;
        height: 1px;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.2s;
        z-index:999;
    }
    .assist-y,
    .y-line{
        width: 1px;
        height: 100%;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.2s;
        z-index:999;
    }
}
</style>

